<template>
  <div class="swll app-container">
    <el-form :inline="true">
      <el-form-item>
        <el-select style="width: 280px" v-model="czcode" filterable placeholder="测站名称" size="small" @change="handlecz" >
          <el-option v-for="item in czlist" :key="item.statCd"
                     :label="item.statNm" :value="item.statCd"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select style="width: 280px" v-model="ckqxbean" filterable placeholder="曲线名称" clearable size="small" @change="handleQuery" >
          <el-option v-for="dict in qxoplist" :key="dict.curvNm"
                     :label="dict.curvNm" :value="dict.curvNm" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
        >水位流量率定表导入</el-button>
      </el-form-item>
    </el-form>
    <div style="display: flex;justify-content: space-between;flex-direction: row;">
      <div>
        <span style="font-size: 14px;" >关系曲线函数</span>
        <span class="sp_col" >{{qxbean}}</span>
        <span class="sp_css" >淤积深度（m）<span class="sp_col" style="margin-left: 1px;" >{{xjsd}}</span></span>
      </div>

      <div>
        是否启用<el-switch style="margin-left: 15px;" @change="qxkg" v-model="swv" size="small" ></el-switch>
        <span style="margin-left: 15px;" v-show="swv" >开</span>
        <span style="margin-left: 15px;" v-show="!swv" >关</span>
      </div>
    </div>
    <!-- <div class="sfqy_css" >
        是否启用<el-switch style="margin-left: 15px;" @change="qxkg" v-model="swv" size="small" ></el-switch>
        <span style="margin-left: 15px;" v-show="swv" >开</span>
        <span style="margin-left: 15px;" v-show="!swv" >关</span>
    </div> -->

    <el-tabs type="border-card" style="margin-top: 20px;"  >
      <el-tab-pane label="对照表">
        <div id="swtable" v-loading="loadingtwo" ></div>
      </el-tab-pane>
      <el-tab-pane label="关系曲线">
        <div id="swllgxt_echars" v-loading="loading" ></div>
      </el-tab-pane>
    </el-tabs>


    <!--批量导入关系曲线函数-->
    <el-dialog :title="uploadOne.title" :visible.sync="uploadOne.open" width="400px" append-to-body>
      <el-upload
        ref="uploadOne"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="uploadOne.headers"
        :action="uploadOne.url + '?updateSupport=' + uploadOne.updateSupport"
        :disabled="uploadOne.isUploading"
        :on-progress="handleFileUploadProgressOne"
        :on-success="handleFileSuccessOne"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载水位流量率定表模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileFormOne">确 定</el-button>
        <el-button @click="uploadOne.open = false">取 消</el-button>
      </div>
    </el-dialog>




  </div>
</template>

<script>
  import { selCurvNmByStatCd, selRelZQCurvNm, selQXByStatCdAndCurvNm, updateRelZQEnabType } from "@/api/waterManagement/RelZQ";
  import { AllListWater } from "@/api/datam/StStationB";
  import { getToken } from "@/utils/auth";
  import * as echarts from 'echarts'


  export default {
    name: "watermonitor",
    props:['czid'],
    data() {
      return {
        //测站统计
        cztgitem:{
          znum: 0,
        },
        // 遮罩层
        loading: false,
        loadingtwo: false,
        sslist:[],
        qxoplist:[],
        ckqxbean:'',
        czcode:'',
        qxbean:{},
        xjsd:'',
        swv:false,
        czlist:[],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        //批量导入关系曲线函数
        uploadOne: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/waterManagement/RelZQ/importData"
        },
      };
    },
    created() {
    },
    mounted () {
      var wd = document.body.clientWidth*0.80;
      document.getElementById("swllgxt_echars").style.width = wd+"px";
      document.getElementById("swtable").style.width = (wd-30)+"px";
      this.loadczlist();
    },
    methods: {
      /** 关系曲线函数导入按钮操作 */
      handleImport() {
        this.uploadOne.title = "水位流量率定表导入";
        this.uploadOne.open = true;
      },
      /** 下载模板操作 */
      importTemplate() {
        this.download('waterManagement/RelZQ/importTemplate', {
          ...this.queryParams
        }, `水位流量率定表模板_${new Date().getTime()}.xlsx`)
      },

      // 文件上传中处理
      handleFileUploadProgressOne(event, file, fileList) {
        this.uploadOne.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccessOne(response, file, fileList) {
        this.uploadOne.open = false;
        this.uploadOne.isUploading = false;
        this.$refs.uploadOne.clearFiles();
        this.$alert(response.msg, "导入水位流量率定表", { dangerouslyUseHTMLString: true });
        this.getList();
      },
      // 提交上传文件
      submitFileFormOne() {
        this.$refs.uploadOne.submit();
      },













      loadczlist(){
        AllListWater({statType:2}).then(response => {
          let clist = response.rows;
          this.czlist = clist;
          if(clist.length>0){
            this.czcode = this.czlist[0].statCd;
            this.getoption(this.czcode);
          }
        });
      },
      qxkg(){
        var ups = {
          enabType : this.swv?0:1,
          curvNm : this.ckqxbean,
          statCd : this.czcode,
        }
        const _t = this;

        updateRelZQEnabType(ups).then(response => {
          let rp = response;
          if(rp.code==200){
            if(this.swv){
              this.$modal.msgSuccess("开启成功");
            }else{
              this.$modal.msgSuccess("关闭成功");
            }
          }else{
            this.$message.error(rp.msg);
            this.swv = !this.swv;
          }
        });
      },
      handleQuery(){
        this.getechars(this.czcode);
        this.gettable(this.czcode);
      },
      handlecz(){
        this.getoption(this.czcode);
      },
      getoption(czid){

        var pd = {
          statCd : czid,
        }
        const _t = this;
        selCurvNmByStatCd(pd).then(response => {
          _t.qxoplist = response.data;
          if(response.data.length>0){
            _t.ckqxbean = response.data[0].curvNm;
            _t.getechars(czid);
            _t.gettable(czid);
          }else {
            this.qxbean='暂无';
            this.xjsd='暂无';
          }
        });
      },
      getechars(czid){
        var pd = {
          statCd : czid,
          curvNm: this.ckqxbean
        }
        const _t = this;
        _t.loading = true;
        selQXByStatCdAndCurvNm(pd).then(response => {
          let edata = response.data;
          let ebean = edata;
          this.qxbean='Q='+ebean.k1+'*x+('+ebean.k2+'*x²)+('+ebean.k3+'*x³)+('+ebean.k4+'*x⁴)+('+ebean.k5+'*x⁵)+'+ebean.b
          this.xjsd =ebean.siltDepth;
          let maxv = ebean.topZ;
          let b = ebean.b;
          let k1 = ebean.k1;
          let k2 = ebean.k2;
          let k3 = ebean.k3;
          let k4 = ebean.k4;
          let k5 = ebean.k5;
          _t.loadecharts(maxv,b,k1,k2,k3,k4,k5);
          _t.swv = ebean.enabType == 0 ? true:false;
        });
      },
      gettable(czid){
        var pd = {
          statCd : czid,
          curvNm: this.ckqxbean
        }
        const _t = this;
        _t.loadingtwo = true;
        selRelZQCurvNm(pd).then(response => {

          var tblist = response.data;
          var nrhtml = '<table><tr class="tsback" >'+
            '   <td class="first" >'+
            '       <span class="title1">水位</span>'+
            '       <span class="title2">流量</span>'+
            '       <span class="title3">水位</span>'+
            '   </td>'+
            '   <td>0</td>'+
            '   <td>1</td>'+
            '   <td>2</td>'+
            '   <td>3</td>'+
            '   <td>4</td>'+
            '   <td>5</td>'+
            '   <td>6</td>'+
            '   <td>7</td>'+
            '   <td>8</td>'+
            '   <td>9</td>'+
            '</tr>';
          for (let i = 0; i < tblist.length; i++) {
            nrhtml += '<tr>';
            let listi = tblist[i];
            for (let j = 0; j < listi.length; j++) {
              if(j==0){
                nrhtml += '<td class="tsback" >'+listi[j]+'</td>';
              }else{
                nrhtml += '<td>'+listi[j]+'</td>';
              }

            }
            nrhtml += '</tr>';

          }

          nrhtml += '</table>';

          document.getElementById("swtable").innerHTML = nrhtml;
          _t.loadingtwo = false;

        });
      },
      loadecharts(maxv,b,k1,k2,k3,k4,k5) {
        console.info(maxv,b,k1,k2,k3,k4,k5)
        let sw = [];
        let ll = [];

        for (var i = 0; i <= maxv; i = (i*1000+0.1*1000)/1000  ) {

          sw.push(i);
          if(i==0){
            ll.push(0);
          }else{
            var onum = parseFloat(k1*i+k2*Math.pow(i,2)+k3*Math.pow(i,3)+k4*Math.pow(i,4)+k5*Math.pow(i,5));
            var tnum = parseFloat(b);
            var l = onum + tnum;
            var n;
            if((l + '').indexOf('.')==-1){
              n = l
            }else{
              n = (l+'').substring(0,(l + '').indexOf('.') + 3);
            }
            ll.push(n);
          }
        }
        console.info(sw,ll)
        let llist = []
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('swllgxt_echars'));
        // 绘制图表
        myChart.setOption({
          color:['#5DACD8'],
          grid: {
            left: '3%',
            right: '6%',
            bottom: '5%',
            top: '30%',
            containLabel: true
          },
          title: {
            text: '水位流量关系图',
            left: 'left',
            textStyle:{
              //文字颜色
              color:'#1699F3',
              fontStyle:'normal',
              fontWeight:'bold',
              //字体系列
              fontFamily:'sans-serif'
            }

          },
          tooltip: {
            trigger: 'axis',
            formatter(params){
              let firstParams = params[0];
              return firstParams.name + ' 米 <br>' + firstParams.seriesName + ' : '+firstParams.value + ' m³/s';
            }
          },
          xAxis: {
            name: '（m）',
            type: 'category',
            splitLine: { show: true },
            minorTick: {
              show: true
            },
            minorSplitLine: {
              show: true
            },
            data: sw
          },
          yAxis : [{
            name: '(m³/s)',
            type: 'value',
            splitLine:{show:true},
            minorTick: {
              show: true
            },
            minorSplitLine: {
              show: true
            }
          }
          ],
          dataZoom: [
            {
              show: true,
              type: 'inside',
              filterMode: 'none',
              xAxisIndex: [0],
              startValue: 1,
              endValue: 100
            }
          ],
          series: [
            {
              name: '流量',
              type: 'line',
              symbol:"none", // 是否显示节点
              data: ll,
              smooth: true
            },
          ]
        });

        this.loading = false;
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss">

  #swllgxt_echars{
    min-width: 600px;
    height: 300px;
    margin: 5px auto;
    margin-top: 20px;
  }

  .sp_css{
    margin-left: 20px;
    font-size: 14px;
  }

  .sp_col{
    margin-left: 20px;
    color: #489CF3;
    font-size: 14px;
  }

  .sfqy_css{
    font-size: 14px;
    position: absolute;
    top:60px;
    right: 60px;
  }

  #swtable{
    min-width: 600px;
    min-height: 300px;
    margin: 0px auto;
    margin-top: 30px;
    .tsback{
      background: #F8F8F9;
      height: 60px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      table-layout: fixed;
    }

    table, tr, td {
      border: 1px solid #DFE6EC;
    }

    td {
      text-align: center;
      height: 50px;
      position: relative;
    }

    td[class=first] {
      width: 150px;
    }

    td[class=first]:before {
      content: "";
      position: absolute;
      width: 1px;
      height: 152px;
      top: 27px;
      left: 0;
      background-color: #DFE6EC;
      display: block;
      transform: rotate(-78deg);
      transform-origin: top;
      -ms-transform: rotate(-78deg);
      -ms-transform-origin: top;
    }

    td[class=first]:after {
      content: "";
      position: absolute;
      width: 1px;
      height: 114px;
      top: 0;
      left: 55px;
      background-color: #DFE6EC;
      display: block;
      transform: rotate(-58deg);
      transform-origin: top;
      -ms-transform: rotate(-58deg);
      -ms-transform-origin: top;
    }

    .title1 {
      position: absolute;
      top: 2px;
      right: 16px;
    }

    .title2 {
      position: absolute;
      top: 5px;
      left: 18px;
    }

    .title3 {
      position: absolute;
      top: 36px;
      left: 5px;
    }
  }

  .swll{
    padding: 20px;
    min-width: 700px;
  }

</style>
